<template>
  <div>
    <el-collapse-transition>
      <div class="contact" v-show="ts">
        <p @mousedown="move">
          系统悬浮窗
          <i class="el-icon-close" title="点击关闭" @click.stop="close"></i>
        </p>
        <div class="as">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="通告消息" name="1">
              <el-button size="mini" type="warning" @click="empty">清空</el-button>
              <!-- <el-button
                @click="Success"
              >只看成功</el-button>
               <el-button
                @click="fail"
              >只看失败</el-button>-->
              <el-radio v-model="radio" label="1" @change="Success">查看所有</el-radio>
              <el-radio v-model="radio" label="2" @change="fail">查看失败</el-radio>
              <div class="news">
                <ul v-if="radio==1?true:false">
                  <li v-for="(item,index) in soketData" :key="index" ref="del">
                    <span>{{item.targetName}}</span>
                    <span class="Time">{{item.cmdTime}}</span>
                    <br />
                    <span
                      :class="item.status?'Success':'fail'"
                    >{{item.cmd}} {{item.status?'成功':'失败'}} {{item.message}}</span>
                  </li>
                  <h2 v-show="soketData.length>0?false:true">暂无通告消息</h2>
                </ul>
                <ul v-if="radio==1?false:true">
                  <li v-for="(item,index) in soketDataFail" :key="index" ref="del">
                    <span>{{item.targetName}}</span>
                    <span class="Time">{{item.cmdTime}}</span>
                    <br />
                    <span :class="item.status?'Success':'fail'">{{item.cmd}} 失败</span>
                  </li>
                  <h2 v-show="soketDataFail.length>0?false:true">暂无失败消息</h2>
                </ul>
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="告警消息" name="2">
              <div>
                <!-- <el-radio v-model="state" label="1" @change="stateWarning">告警</el-radio>
                <el-radio v-model="state" label="2" @change="stateOffLine">离线</el-radio>-->
              </div>
              <div class="news">
                <ul>
                  <li v-for="(item,index) in warningList" :key="index">
                    <span>{{item.devName}}</span>
                    <span class="Time">{{item.time}}</span>
                    <br />
                    <span style="color:#FFB90F">{{item.message}}</span>
                  </li>
                </ul>
                <h2 v-show="warningList.length==0 ? true:false">暂无告警消息</h2>
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="离线消息" name="3">
              <div class="news">
                <ul>
                  <li v-for="(item,index) in OffLine" :key="index">
                    <span>{{item.devName}}</span>
                    <span class="Time">{{item.time}}</span>
                    <br />
                    <span style="color:#ccc">{{item.message}}</span>
                  </li>
                </ul>
                <h2 v-show="OffLine.length==0 ? true:false">暂无离线消息</h2>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      icon: "el-icon-arrow-left",
      ts: false,
      activeNames: [""],
      activeName: "1",
      checkList: ["选择"],
      timeList: [],
      Listname: [],
      personnel: [],
      value1: null,
      checked: false,
      textarea: "",
      listshow: false,
      nameShow: false,
      text: "",
      websocket: null,
      soketData: [],
      websock: null,
      token: "",
      warningList: [],
      timer: null,
      s: false,
      c: true,
      radio: "1",
      LocalArr: [],
      Local: [],
      state: "1",
      OffLine: [],
      frequency: 0
    };
  },

  mounted() {
    // this.stateOffLine();
    // this.stateWarning();
    // this.LocalAssignment();
    // this.WebSocketTest();
    // this.warning();
    // this.timer = setInterval(() => {
    //   // this.warning();
    //   this.stateOffLine();
    //   this.stateWarning();
    // }, 300000);
  },
  destroyed() {
    // if(this.$route.path!="/distribution"&&this.$route.path!="/BoxStrategy"){
    //     this.websock.close();
    // }
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  computed: {
    soketDataFail() {
      return this.soketData.filter(v => {
        return v.status == false;
      });
    },
   
  },
  watch: {
    frequency(value) {
      if (value > 5) {
        this.websock.close();
      }
    }
  },
  methods: {
    Success() {
      this.c = true;
      this.s = false;
    },
    fail() {
      this.s = true;
      this.c = false;
      // },
      // sc(){
      //     this.WebSocketTest();
    },
    close() {
      //
      // this.websock.close();
      this.ts = false;
    },
    empty() {
      sessionStorage.removeItem("Local");
      this.soketData.splice(0, this.soketData.length);
    },
    WebSocketTest() {
      this.frequency++;
      this.token = sessionStorage.getItem("token");
      const userId = sessionStorage.getItem("userId");
      const userRole = sessionStorage.getItem("userRole");
      let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
      let ws_base_url = `${ws_scheme}://${window.location.host}`;
      // serviceIp+"/socket/ajaxchattest" 测试使用
      this.websock = new WebSocket(
        ws_base_url +
          `/WS/subscribe/cmdresponse?AuthUserToken=${this.token}&AutherRole=${userRole}&AuthUserId=${userId}`
      );
      if (this.frequency < 5) {
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      }
    },
    websocketonopen(e) {
      console.log("成功连接");
      let data = {
        cmd: 0,
        token: this.token,
        errorOnly: false
      };
      this.websocketsend(JSON.stringify(data));
    },
    websocketonerror(e) {
      setTimeout(() => {
        console.log("websoket，链接错误");
        this.WebSocketTest();
      }, 1000);
    },
    websocketonmessage(event) {
      var obj = JSON.parse(event.data);
      
      if (event.data) {
        for (let index = 0; index < this.soketData.length; index++) {
          if (this.soketData[index].targetId == obj.targetId&&this.soketData[index].cmd==obj.cmd) {
            this.soketData.splice(index, 1);
          }
        }
        this.soketData.unshift(JSON.parse(event.data));
        // if (this.soketData.length > 100) {
        //   this.soketData.pop();
        // }

        sessionStorage.setItem("Local", JSON.stringify(this.soketData));
      }
    },
    websocketsend(Data) {
      this.websock.send(Data);
    },
    websocketclose(e) {
      console.log("断开连接");
      if (
        this.$route.path == "/distribution" ||
        this.$route.path == "/BoxStrategy"
      ) {
        setTimeout(() => {
          // this.WebSocketTest();
        }, 5000);
      }
    },
    LocalAssignment() {
      let  arr= [];
      this.soketData = JSON.parse(sessionStorage.getItem("Local"));
      this.soketData ? this.soketData : (this.soketData = []);
      console.log(this.soketData)
      for (let index = 0; index < this.soketData.length; index++) {
        arr.push(this.soketData[index]);
      }
      this.soketData = arr;
    },

    move(e) {
      let box = document.querySelector(".contact");
      let box_left = parseInt(box.style.left || getComputedStyle(box).left);
      let box_top = parseInt(box.style.top || getComputedStyle(box).top);
      let box_a = e.pageX;
      let box_b = e.pageY;
      document.onmousemove = e => {
        let k = e.pageX;
        let j = e.pageY;
        let left = k - box_a + box_left;
        let top = j - box_b + box_top;
        box.style.left = left + "px";
        box.style.top = top + "px";
      };
      document.onmouseup = e => {
        document.onmousemove = null;
      };
    },
    handleChange(val) {
    },
    sidebar() {
      this.side = !this.side;
      if (this.side == false) {
        this.ts = false;
      }
    },
    opens() {
      if (this.icon == "el-icon-arrow-left") {
        this.icon = "el-icon-arrow-right";
        this.ts = !this.ts;
      } else if (this.icon == "el-icon-arrow-right") {
        this.icon = "el-icon-arrow-left";
        this.ts = !this.ts;
      }
    },
    list() {
      this.listshow = true;
    },
    Close() {
      this.listshow = false;
    },
    nameList() {
      this.nameShow = true;
    },
    cancelName() {
      this.nameShow = false;
    },
    stateWarning() {
      this.warning(true).then(res => {
        if (res.data.data) {
          this.warningList = res.data.data;
        }
      });
    },
    stateOffLine() {
      this.warning(false).then(res => {
        if (res.data.data) {
          this.OffLine = res.data.data;
        }
      });
    },
    async warning(state) {
      let res = await this.$http.get("/api/threesuns/map/loops/warn/get", {
        params: {
          isOnline: state
        }
      });
      return res;
    }
  }
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.as {
  overflow: hidden;
  width: 100%;
  height: 758px;
  overflow-y: scroll;
  padding: 10px;
  padding-top: 15px;
}
.as::-webkit-scrollbar {
  width: 3px;
}
.as::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
.as::-webkit-scrollbar-thumb {
  background-color: #fff;
}

/deep/ .as .el-collapse-item__header {
  height: 28px;
  line-height: 28px;
  color: #ffffff;
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
  font-size: 13px;
  font-weight: 500;
  outline: 0;
  background: #26aea1;
  padding-left: 45%;
}

/deep/ .el-collapse-item__arrow {
  height: 28px;
  line-height: 28px;
}

/deep/ .el-collapse-item__header {
  margin-top: 10px;
  color: #fff;
  padding-left: 24px;
}

.el-collapse {
  border: none;
}

/deep/ .el-collapse-item__content {
  margin-bottom: -14px;
  /* margin-left: 5px; */
  /* background-color: rgba(0,0,0,0.5); */
}

.dk {
  border: 1px solid #ccc;
  margin-bottom: 15px;
}
/* //tab切换 */

/deep/ .el-tabs__item {
  padding: 0 12px;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
}

/deep/ .el-tabs__nav {
  margin-left: 50px;
}

.el-pagination--small {
  /* padding-left :4px;  */
  text-align: center;
}

.dk ul {
  padding: 0 6px;
  overflow: hidden;
}

/deep/ .el-pager li {
  background: rgba(0, 0, 0, 0.4);
}

/deep/ .el-pagination button {
  background: rgba(0, 0, 0, 0.4);
}

/deep/ .el-tabs__item.is-active {
  color: #26aea1;
}

/deep/ .el-tabs__active-bar {
  background-color: #26aea1;
}

/deep/ .el-tabs__item {
  color: #fff;
}

.dk ul li {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  color: #fff;
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 12px;
}

/deep/ .el-collapse-item__wrap {
  border: none;
  background: rgba(0, 0, 0, 0.4);
}

.time {
  float: right;
  margin-right: 3px;
  color: #9ee2ac;
}

.dk ul li span {
  margin-right: 15px;
}

.dk i {
  font-style: normal;
}

.news {
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.news ul {
  padding: 0 6px;
  overflow: hidden;
}

.news ul li {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  color: #9d9d9d;
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 12px;
}

.news ul,
.dk ul :last-child {
  border-bottom: none;
}

.news {
  margin-top: 10px;
}

.news i {
  font-style: normal;
}

/deep/ .el-checkbox__label {
  color: #9d9d9d;
  font-size: 12px;
}

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #9d9d9d;
}

.Repair {
  border: 1px solid #ccc;
  padding: 0 8px;
  margin-bottom: 10px;
}

.title {
  height: 34px;
  border-bottom: 1px solid #ccc;
  line-height: 34px;
}

.title span {
  display: inline-block;
  text-align: center;
  background-color: transparent;
}

.title i {
  float: right;
  margin-top: 10px;
}

.personnel {
  box-sizing: border-box;
  padding-left: 25px;
  border-top: none;
  padding-top: 14px;
  padding-bottom: 14px;
}

.personnel .el-checkbox {
  width: 50%;
  margin: 0 auto;
}

.describe {
  border: 1px solid #ccc;
  padding: 0 8px;
  padding-bottom: 10px;
}

.el-checkbox-group :last-child {
  border-bottom: none;
}

.urgent .el-rate {
  display: inline-block;
}

.neck {
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  font-size: 12px;
}

.DescriptionContent {
  margin-top: 20px;
}

.textarea {
  height: 100px;
}

/deep/ .el-textarea__inner {
  height: 100px;
}

.SendOut {
  padding-top: 10px;
}

.btn {
  margin-top: 20px;
  margin-left: 57px;
}

.el-button {
  padding: 0 5px;
  height: 25px;
  border-radius: 12px;
  margin-top: 10px;
  margin-right: 30px;
}

.sidebar {
  height: 400px;
  width: 44px;
  /* background-color: #004494; */
  border-radius: 12px;
  text-align: center;
  line-height: 400px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  position: absolute;
  z-index: 2;
  right: 10px;
}

.contact {
  width: 341px;
  height: 837px;
  /* border: 1px solid rgb(25, 84, 157); */
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background-color: #030c11;
}

.contact p {
  text-align: center;
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  background-color: #26aea1;
  color: #ffffff;
  position: relative;
}

.contact p i {
  position: absolute;
  right: 15px;
  top: 14px;
  font-size: 20px;
}
i:hover {
  cursor: pointer;
}
.top {
  height: 30px;
  position: relative;
}

.top span {
  display: block;
  text-align: center;
  line-height: 14px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 13px;
}

.top > i {
  position: absolute;
  right: 5px;
  top: 2px;
}
/* 故障信息列表 */

.con {
  width: 490px;
  position: absolute;
  z-index: 2;
  top: 200px;
  left: 10px;
  background-color: #fff;
}

.con1 {
  position: absolute;
  left: 600px;
}

.con h2 {
  height: 34px;
  /* background-color: #004494; */
  color: #fff;
  line-height: 34px;
  padding-left: 20px;
}

.banner {
  height: 325px;
  /* border: #004494 1px solid; */
}

.div ul {
  overflow: hidden;
  overflow-y: scroll;
  width: 490px;
  height: 250px;
  padding: 0 15px 0 15px;
}

.div ul::-webkit-scrollbar {
  width: 5px;
  background: red;
}

.div ul::-webkit-scrollbar-track {
  background: RGB(223, 235, 248);
}

.div ul::-webkit-scrollbar-thumb {
  background: RGB(95, 154, 228);
}

.div li {
  padding-left: 10px;
  height: 53px;
  border-top: 1px solid #e6e6e6;
  padding-top: 5px;
}

/deep/ .con .el-checkbox-group {
  font-size: 14px;
}

h2 i {
  float: right;
  margin-top: 7px;
  margin-right: 15px;
}

h2:hover {
  cursor: pointer;
}

.container span {
  color: #5a5a5a;
  font-size: 14px;
}

.container b {
  padding-left: 20px;
  color: #9e9e9e;
  font-weight: 400;
  font-size: 12px;
}

.container p {
  width: 100%;
  float: right;
  color: #fff;
  /* margin-right: 10px; */
  font-size: 12px;
}

.search {
  height: 56px;
  line-height: 56px;
  padding: 0 15px 0 15px;
  position: relative;
}

.search i {
  position: absolute;
  left: 20px;
  top: 22px;
}

.search input {
  width: 189px;
  height: 30px;
  padding-left: 30px;
}

.search .el-button {
  height: 30px;
}

.name1 {
  color: #9d9d9d;
  padding: 0 15px 0 15px;
  height: 250px;
}

.name1::-webkit-scrollbar {
  width: 3px;
  background: red;
}

.name1::-webkit-scrollbar-track {
  background: RGB(223, 235, 248);
}

.name1::-webkit-scrollbar-thumb {
  background: RGB(95, 154, 228);
}

.name1 li {
  height: 40px;
  border-top: 1px solid #ccc;
  line-height: 40px;
}

.name1 li span {
  font-size: 14px;
  color: #9e9e9e;
  margin-right: 10px;
}

.name1 {
  overflow: hidden;
  overflow-y: scroll;
}

.fail {
  color: red;
}

.Success {
  color: RGBA(9, 218, 186, 230);
}

h2 {
  color: #fff;
  text-align: center;
}

.news li:last-child {
  border-bottom: none;
}

.el-radio + .el-radio {
  margin-left: 10px;
}

.Time {
  float: right;
  color: #fff;
}
</style>
